<template>
	<scroll-view style="height: 100%;" scroll-y="true">
		<uni-list>
			<uni-list-item direction="row" v-for="item in data" :key="item.id" :to="`topic?id=${item.id}&title=${item.title}`">
				<template v-slot:body>
					<view class="uni-list-box uni-content">
						<image :src="item.image" mode="widthFix" class="topic-image" style="width: 100%;"></image>
						<view class="topic-title">
							{{item.title}}
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-load-more v-if="showLoad" :status="loadStatus" />
		<image src="https://zhzx.on-line-demo.com/image/zwsj.png" mode="aspectFit" class="no-data"
			v-if="loadStatus == 'no-more' && data.length == 0"></image>
	</scroll-view>
</template>

<script>
	import request from '../common/request.js'
	export default {
		components: {
			
		},
		data() {
			return {
				data:[],
				page: 1,
				loadStatus: 'loading',
				showLoad: false,
			}
		},
		mounted(){
			this.getListData()
		},
		methods: {
			getListData(){
				request({
					url:'/news/indexSpecial',
					method:'POST',
				}).then(res => {
						if(res.code == 1){
							this.data = res.data
						}else{
							this.loadStatus = 'no-more'
						}
					})
			},
		}
	}
</script>

<style scoped>
	.uni-content{
		width: 100%;
	}
	.topic-image{
		border-radius: 15px;
		margin-top: 10px;
	}
	.topic-title{
		font-weight: bold;
		text-align: center;
		font-size: 16px;
		margin: 15px 0px;
	}
</style>